<template>
 <div id="album">
   <!-- 封面 -->
   <div class="cover"></div>
   <!-- 相册 -->
   <div class="album">
        <div class="title">
          <div class="als">Memory</div>
          <div class="vr"></div>
          <div class="ss">历史回忆</div>
        </div>
        <div class="imgShows">
          <div class="imgList active" >
            <div class="img">
              <img :src="baseURL+coverImglist.one.src" alt="">
            </div>
            <div class="title">
              {{coverImglist.one.title}}
            </div>
          </div>
          <div class="imgList" >
            <div class="img">
              <img :src="baseURL+coverImglist.two.src" alt="">
            </div>
            <div class="title">
              {{coverImglist.two.title}}
            </div>
          </div>
          <div class="imgList" >
            <div class="img">
              <img :src="baseURL+coverImglist.three.src" alt="">
            </div>
            <div class="title">
              {{coverImglist.three.title}}
            </div>
          </div>
          <div class="imgList" >
            <div class="img">
              <img :src="baseURL+coverImglist.four.src" alt="">
            </div>
            <div class="title">
              {{coverImglist.four.title}}
            </div>
          </div>

        </div>
   </div>
   <!-- 展示 -->
   <div class="display">
     <div class="center">
       <!-- 滚动图 -->
       <div class="roll">
         <!-- 占位符 -->
         <div class="vr"></div>
         <div class="vr1"></div>
         <!-- 滚动条 -->
         <div class="showRoll" id="roll">
           <div class="rollImg" v-for="item in dynamicImglist" :key="item._id">
             <img :src="baseURL+item.src" alt="">
             <div class="title">{{item.title}}</div>
           </div>
         </div>
       </div>
       <!-- 静态图 -->
       <div class="static">
        <div class="staticImg" v-for="item in staticImglist" :key="item._id"> 
          <img :src="baseURL+item.src" alt="">
          <div class="title">{{item.title}}</div>
        </div>
       </div>
     </div>
   </div>
 </div>
</template>
 
<script>
import $ from "jquery";
export default {
  name: 'Album',
  data(){
    return{
      // 封面相册
      coverImglist:{
        one:"",
        two:"",
        three:"",
        four:""
      },
      // 静态相册
      staticImglist:[],
      // 动态相册
      dynamicImglist:[]
    }
  },
  methods:{
    // 获取封面相册
    async getCoverImglist(){
      let {data} = await this.$axios.get("/client/album/imgs",{
        params:{
          type:"封面相册"
        }
      })
      if(data.code) return this.$message.warning(data.mes)
      this.coverImglist.one = data.data[0]
      this.coverImglist.two = data.data[1]
      this.coverImglist.three = data.data[2]
      this.coverImglist.four = data.data[3]
    },
    // 获取静态相册
    async getStaticImglist(){
      let {data} = await this.$axios.get("/client/album/imgs",{
        params:{
          type:"静态相册"
        }
      })
      if(data.code) return this.$message.warning(data.mes)
      this.staticImglist = data.data
    },
    // 获取动态相册
    async getDynamicImglist(){
      let {data} = await this.$axios.get("/client/album/imgs",{
        params:{
          type:"动态相册"
        }
      })
      if(data.code) return this.$message.warning(data.mes)
      this.dynamicImglist = data.data
    }
  },
  created(){
    // 获取相册
    this.getCoverImglist()
    this.getStaticImglist()
    this.getDynamicImglist()
  },
  mounted(){
    let imgList = $(".imgList")
    let rollIndex = 0
    $.each(imgList,(index,value)=>{
      $(value).hover(()=>{
        $(value).addClass("active").siblings().removeClass("active")
      })
    })
    function moveRoll(){
      requestAnimationFrame(moveRoll)
       rollIndex--
      if(rollIndex<(-1000/2-40)){
        rollIndex = 0
      }
       $("#roll").css("transform",`translateX(${rollIndex}px)`)
    }
    moveRoll()
    
  }
}
</script>

<style scoped lang='less'>
#album{
  width: 100%;
  .cover{
    width: 100%;
    height: 370px;
    background: url("../assets/img/albumBg.jpg") no-repeat;
  }
  .album{
      width: 1200px;
      // height: 440px;
      margin: 70px auto;
      .title{
        width: 266px;
        height: 80px;
        margin: auto;
        text-align: center;
        .als{
          color: #444444;
          font-size: 26px;
        }
        .vr{
          width: 30px;
          height: 2px;
          background-color: #FFC001;
          margin: 22px auto;
        }
        .ss{
          font-size: 20px;
          color: #444444;
        }
        
      }
      .imgShows{
        width: 1200px;
        height: 440px;
        margin-top: 70px;
        display: flex;
        align-items: center;
        border-radius: 0;
        .imgList{
          width: 277px;
          height: 340px;
          box-shadow: 3px 0px 10px #dbdbdb;
          &.active{
            width: 370px;
            height: 420px;
            transition: all .4s;
            .img{
              width: 370px;
              height: 365px;
            }
            .title{
              width: 370px;
              height: 55px;
              background-color: #fff;
              text-align: center;
              line-height: 55px;
              font-size: 14px;
              color: #777777;
              display: block;
            }
          }
          .img{
            width: 100%;
            height: 100%;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .title{
            display: none;    
          }
        }
      }
  }
  .display{
    width: 100%;
    background: url("../assets/img/home02.jpg");
    .center{
      width: 1200px;
      margin: 0 auto;
      .roll{
        width: 1120px;
        height: 224px;
        box-shadow: 0px 0px 12px #dddddd;
        padding: 40px;
        background-color: #fff;
        overflow: hidden;
        position: relative;
        .vr{
            position: absolute;
            background-color: #fff;
            width: 40px;
            height: 230px;
            right: 0;
            z-index: 100;
        }
        .vr1{
          position: absolute;
          background-color: #fff;
          width: 40px;
          height: 230px;
          left: 0;
          z-index: 100;
        }
        .showRoll{
          width: 200%;
          height: 100%;
          .rollImg{
            width: 300px;
            height: 200px;
            border-radius: none;
            float: left;
            position: relative;
            margin: 0 20px;
            img{
              width: 100%;
              height: 100%;
              border-radius: none;
            }
            .title{
              width: 100%;
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              color:#666666;
              text-align: center;
            }
          }
        }
      }
      .static{
        width: 1200px;
        margin-top: 76px;
        display: flex;
        flex-wrap: wrap;
        .staticImg{
          width: 370px;
          height: 257px;
          margin-right: 45px;
          margin-bottom: 30px;
          &:nth-child(3n){
           margin-right: 0; 
          }
          img{
            width: 370px;
            height: 217px;
            border-radius: 8px;
          }
          .title{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            color:#666666;
          }
        }
      }
    }
  }
}

</style>